<template>
  <div class="deviceConfig-list">
    <el-dialog :title="formTitle" :visible.sync="visible" height="700px" width="80%" :close-on-click-modal=false  @close="dialogClose">
    <el-table
      stripe
      ref="deviceConfigTable"
      height="800"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      :data="userDeviceConfigDataList"
    >
      <el-table-column
      type="selection"
      width="55">
    </el-table-column>
      <el-table-column
        align="center"
        label="设备名称"
        prop="device_name"
      >
      </el-table-column>
    </el-table>
      <div slot="footer">
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

  export default {
    name: "deviceConfigList",
    methods: {
      deviceConfigQuery(){
        let me = this;
        this.visible = true;
        this.$axios.post('userConfigRoutes', {
          action_type: 'deviceConfigQuery',
          enterprise_id:me.$parent.$route.params.enterprise_id,
          user_id:me.$parent.$route.params.user_id
        }).then(function (response) {
          me.userDeviceConfigDataList = response.data.data;
          me.deviceConfigSelection = response.data.deviceConfig;
          me.$nextTick(()=>{
            me.deviceConfigSelection.forEach(row => {
              for(let data of me.userDeviceConfigDataList){
                if(data.device_id === row.device_id){
                  me.$refs.deviceConfigTable.toggleRowSelection(data,true);
                  break;
                }
              }
          })
        })
      })
      },
      handleSelectionChange(val) {
        this.deviceConfigSelection = val;
      },
      submit(){
        let me = this;
        let user_id = this.$parent.$route.params.user_id;
        let deviceList = this.deviceConfigSelection;
        this.$axios.post('userConfigRoutes', {
          action_type: 'deviceConfig',
          user_id:user_id,
          deviceList:deviceList,
        }).then(function (response) {
          me.reset();
          me.visible = false;
          me.$parent.queryData();
        })
      },
      reset(){
        this.$refs.deviceConfigTable.clearSelection();
        this.userDeviceConfigDataList = [];
        this.deviceConfigSelection = [];
      },
      dialogClose() {
        this.reset();
      }
    },
    data() {
      return {
        userDeviceConfigDataList : [],
        deviceConfigSelection:[],
        formTitle: '配置设备',
        visible: false,
      }
    },
  }
</script>

<style lang="scss" scoped>
  .deviceConfig-list {
    background-color: #fff;
  }
</style>
